<template>
  <div class="grid">
    <!----------------- 建筑---------------- -->
    <div class="item" v-for="(item, index) in modelData" :key="index">
      <GridHeader>
        <template #logo>
          <a-icon :type="item.icon" />
        </template>
        <template #name>
          <span>{{ item.name }}</span>
        </template>
        <template #icon>
          <img
            class="icon"
            v-if="item.state"
            @click="item.state = false"
            src="@/assets/3d_icon/arrow-top.png"
          />
          <img
            class="icon"
            v-else
            @click="item.state = true"
            src="@/assets/3d_icon/arrow-down.png"
          />
        </template>
      </GridHeader>
      <ul class="ul_unit" v-show="item.state">
        <li class="li_unit" v-for="val in item.list" :key="val.id">
          <div class="unit_pic" @dblclick="add3DModel(val)">
            <img :src="val.miniPicUrl" alt="" />
          </div>
          <div class="unit_name">{{ val.name }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import GridHeader from "./comm/gridHeader.vue";
import { sceneList, modelList } from "../request.js";
export default {
  components: {
    GridHeader,
  },
  data() {
    return {
      modelData: [], //模型数据
    };
  },
  created() {
    this.getData();
  },
  methods: {
    add3DModel(v) {
      v.modelDataFiles.forEach((v) => {
        const model = {
          name: v.name,
          userData: {
            modeId: "",
            is3Dmode: true,
            url: v.url,
          },
          scale: {
            x: 1,
            y: 1,
            z: 1,
          },
          position: {
            x: 0,
            y: 0,
            z: 0,
          },
          rotation: {
            x: 0,
            y: 0,
            z: 0,
          },
        };
        window.$WEBGL.editor3D && window.$WEBGL.editor3D.add3DModle(model);
      });
    },
    async getData() {
      let arr = [];
      let params = {
        limit: 1000000,
        page: 1,
      };
      const scene = await sceneList(params);
      if (scene.code == 0) {
        arr.push({
          name: "场景模型",
          icon: "video-camera",
          state: true,
          list: scene.data || [],
        });
      }
      const model = await modelList(params);
      if (model.code == 0) {
        let data = model.data;
        if (data["建筑"]) {
          arr.push({
            name: "建筑",
            icon: "home",
            state: false,
            list: data["建筑"],
          });
        }
        if (data["工业"]) {
          arr.push({
            name: "工业",
            icon: "experiment",
            state: false,
            list: data["工业"],
          });
        }
        if (data["通用"]) {
          arr.push({
            name: "通用",
            icon: "tool",
            state: false,
            list: data["通用"],
          });
        }
        if (data["其他"]) {
          arr.push({
            name: "其他",
            icon: "build",
            state: false,
            list: data["其他"],
          });
        }
      }
      this.modelData = arr;
      // console.log("this.modelData", this.modelData);
    },
  },
};
</script>
<style lang="scss" scoped>
.grid {
  flex: 1;
  //   background-color: pink;
  color: #fff;
  height: 85vh;
  overflow: auto;
  .icon {
    width: 15px;
    height: 8px;
    cursor: pointer;
  }
  .ul_unit {
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    .li_unit {
      margin-top: 10px;
      height: 140px;
      width: 125px;
      .unit_pic {
        width: 100%;
        height: 110px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .unit_name {
        height: 30px;
        background-color: #3d4454;
        line-height: 30px;
        color: #fff;
        font-weight: 14px;
        font-weight: 300;
      }
    }
  }
}
</style>
